// Element Plus 主题定制
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  // 主色调
  $colors: (
    'primary': (
      'base': #d32f2f,
    ),
    'success': (
      'base': #4caf50,
    ),
    'warning': (
      'base': #ff9800,
    ),
    'danger': (
      'base': #f44336,
    ),
    'error': (
      'base': #f44336,
    ),
    'info': (
      'base': #2196f3,
    ),
  ),
  $font-size: (
    'extra-small': 10px,
    'small': 12px,
    'base': 14px,
    'medium': 16px,
    'large': 18px,
    'extra-large': 20px,
  ),
  
  // 边框圆角
  $border-radius: (
    'base': 6px,
    'small': 4px,
    'round': 20px,
    'circle': 100%,
  ),
  
  // 间距
  $common-component-size: (
    'large': 40px,
    'default': 36px,
    'small': 32px,
  ),
  
  // 阴影
  $box-shadow: (
    'base': (0 2px 12px 0 rgba(0, 0, 0, 0.1)),
    'light': (0 2px 12px 0 rgba(0, 0, 0, 0.08)),
    'lighter': (0 2px 12px 0 rgba(0, 0, 0, 0.04)),
    'dark': (0 2px 12px 0 rgba(0, 0, 0, 0.12)),
  ),
);

// 自定义组件样式
:root {
  // 按钮相关
  --el-button-font-weight: 500;
  --el-button-border-radius: var(--radius-md);
  
  // 表单相关
  --el-input-height: 40px;
  --el-input-font-size: var(--font-size-base);
  --el-input-border-radius: var(--radius-md);
  
  // 卡片相关
  --el-card-border-radius: var(--radius-xl);
  --el-card-padding: var(--spacing-xl);
  
  // 对话框相关
  --el-dialog-border-radius: var(--radius-xl);
  
  // 菜单相关
  --el-menu-item-font-size: var(--font-size-base);
  --el-menu-item-height: 48px;
}

// 按钮组件定制
.el-button {
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  
  &.el-button--primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border: none;
    
    &:hover,
    &:focus {
      background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
      box-shadow: var(--shadow-md);
    }
    
    &:active {
      transform: translateY(1px);
    }
  }
  
  &.el-button--success {
    background: linear-gradient(135deg, var(--success-color), var(--success-light));
    border: none;
    
    &:hover,
    &:focus {
      background: linear-gradient(135deg, var(--success-dark), var(--success-color));
    }
  }
  
  &.el-button--warning {
    background: linear-gradient(135deg, var(--warning-color), var(--warning-light));
    border: none;
    
    &:hover,
    &:focus {
      background: linear-gradient(135deg, var(--warning-dark), var(--warning-color));
    }
  }
  
  &.el-button--danger {
    background: linear-gradient(135deg, var(--error-color), var(--error-light));
    border: none;
    
    &:hover,
    &:focus {
      background: linear-gradient(135deg, var(--error-dark), var(--error-color));
    }
  }
  
  &.el-button--text {
    color: var(--primary-color);
    
    &:hover,
    &:focus {
      background: rgba(var(--primary-color), 0.1);
    }
  }
}

// 输入框组件定制
.el-input {
  .el-input__inner {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    font-size: var(--font-size-base);
    height: 40px;
    transition: all var(--transition-fast);
    
    &:focus {
      border-color: var(--primary-color);
      box-shadow: 0 0 0 2px rgba(var(--primary-color), 0.2);
    }
    
    &::placeholder {
      color: var(--text-disabled);
    }
  }
  
  &.is-disabled {
    .el-input__inner {
      background: var(--bg-tertiary);
      color: var(--text-disabled);
    }
  }
}

// 文本域组件定制
.el-textarea {
  .el-textarea__inner {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    transition: all var(--transition-fast);
    
    &:focus {
      border-color: var(--primary-color);
      box-shadow: 0 0 0 2px rgba(var(--primary-color), 0.2);
    }
    
    &::placeholder {
      color: var(--text-disabled);
    }
  }
}

// 选择器组件定制
.el-select {
  .el-input .el-input__inner {
    cursor: pointer;
  }
  
  .el-select__caret {
    color: var(--text-secondary);
    transition: transform var(--transition-fast);
  }
  
  &.is-focused {
    .el-select__caret {
      transform: rotateZ(180deg);
    }
  }
}

// 下拉菜单定制
.el-select-dropdown {
  border: none;
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-lg);
  
  .el-select-dropdown__item {
    height: 36px;
    line-height: 36px;
    padding: 0 var(--spacing-lg);
    font-size: var(--font-size-base);
    
    &:hover {
      background: var(--bg-secondary);
    }
    
    &.selected {
      background: var(--primary-color);
      color: #fff;
      font-weight: var(--font-weight-medium);
    }
  }
}

// 卡片组件定制
.el-card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
  
  &:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-color);
  }
  
  .el-card__header {
    padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-lg);
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-primary);
  }
  
  .el-card__body {
    padding: var(--spacing-xl);
  }
}

// 对话框组件定制
.el-dialog {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  
  .el-dialog__header {
    padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-lg);
    border-bottom: 1px solid var(--border-light);
  }
  
  .el-dialog__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  
  .el-dialog__body {
    padding: var(--spacing-xl);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
  }
  
  .el-dialog__footer {
    padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-xl);
    border-top: 1px solid var(--border-light);
    text-align: right;
    
    .el-button + .el-button {
      margin-left: var(--spacing-md);
    }
  }
}

// 消息提示定制
.el-message {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-size: var(--font-size-base);
  
  &.el-message--success {
    background: var(--success-color);
    color: #fff;
    
    .el-message__icon {
      color: #fff;
    }
  }
  
  &.el-message--warning {
    background: var(--warning-color);
    color: #fff;
    
    .el-message__icon {
      color: #fff;
    }
  }
  
  &.el-message--error {
    background: var(--error-color);
    color: #fff;
    
    .el-message__icon {
      color: #fff;
    }
  }
  
  &.el-message--info {
    background: var(--info-color);
    color: #fff;
    
    .el-message__icon {
      color: #fff;
    }
  }
}

// 通知定制
.el-notification {
  border: none;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  
  .el-notification__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  
  .el-notification__content {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
  }
}

// 标签页定制
.el-tabs {
  .el-tabs__header {
    margin: 0 0 var(--spacing-xl) 0;
    
    .el-tabs__nav-wrap::after {
      height: 1px;
      background: var(--border-light);
    }
    
    .el-tabs__item {
      height: 44px;
      line-height: 44px;
      padding: 0 var(--spacing-xl);
      font-size: var(--font-size-base);
      color: var(--text-secondary);
      transition: all var(--transition-fast);
      
      &:hover {
        color: var(--primary-color);
      }
      
      &.is-active {
        color: var(--primary-color);
        font-weight: var(--font-weight-medium);
      }
    }
    
    .el-tabs__active-bar {
      background: var(--primary-color);
      height: 2px;
    }
  }
}

// 表格定制
.el-table {
  border-radius: var(--radius-lg);
  overflow: hidden;
  
  .el-table__header {
    th {
      background: var(--bg-secondary);
      color: var(--text-primary);
      font-weight: var(--font-weight-semibold);
      border-bottom: 1px solid var(--border-color);
    }
  }
  
  .el-table__body {
    tr {
      &:hover {
        background: var(--bg-secondary);
      }
      
      td {
        border-bottom: 1px solid var(--border-light);
      }
    }
  }
}

// 分页定制
.el-pagination {
  .el-pager {
    .number {
      background: none;
      color: var(--text-secondary);
      border-radius: var(--radius-md);
      transition: all var(--transition-fast);
      
      &:hover {
        background: var(--primary-color);
        color: #fff;
      }
      
      &.active {
        background: var(--primary-color);
        color: #fff;
        font-weight: var(--font-weight-medium);
      }
    }
  }
  
  .btn-prev,
  .btn-next {
    background: none;
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    
    &:hover:not(.disabled) {
      background: var(--primary-color);
      color: #fff;
    }
  }
}

// 面包屑定制
.el-breadcrumb {
  font-size: var(--font-size-base);
  
  .el-breadcrumb__item {
    .el-breadcrumb__inner {
      color: var(--text-secondary);
      
      &.is-link {
        color: var(--primary-color);
        font-weight: var(--font-weight-normal);
        
        &:hover {
          text-decoration: underline;
        }
      }
    }
    
    .el-breadcrumb__separator {
      color: var(--text-disabled);
    }
  }
}

// 加载状态定制
.el-loading-spinner {
  .circular {
    width: 42px;
    height: 42px;
    
    .path {
      stroke: var(--primary-color);
      stroke-width: 2;
    }
  }
}

// 空状态定制
.el-empty {
  .el-empty__image {
    width: 160px;
    
    img,
    svg {
      width: 100%;
      height: 100%;
    }
  }
  
  .el-empty__description {
    margin-top: var(--spacing-lg);
    color: var(--text-secondary);
    font-size: var(--font-size-base);
  }
  
  .el-empty__bottom {
    margin-top: var(--spacing-xl);
  }
}
